import React, { useEffect, useState } from 'react'
import style from './index.module.css'
import store from '../../store';
import { addAction, decAction, clearAction } from '../../store/actions'

export default function Cart() {
    let [active, setActive] = useState(false);
    let [price, setPrice] = useState(0);
    useEffect(() => {
        // console.log(store.getState().cart)
        store.subscribe(() => {
            let total = 0;
            // console.log(store.getState().cart)
            store.getState().cart.forEach(item => {
                total += item.price * item.num;
            })
            setPrice(total);
        })
    }, [])

    function openCart() {
        setActive(!active);
    }
    function closeCart(e) {
        if (e.target.className === style.cart_container && active) {
            setActive(!active);
        }
    }

    function add(name) {
        store.dispatch(addAction({ title: name }))
        // console.log(store.getState())
    }
    function sub(name) {
        store.dispatch(decAction({ title: name }))
    }
    function clearCart() {
        store.dispatch(clearAction());
    }
    return (<div>
        <div className={style.cart_bar} onClick={openCart}>
            <div className={style.cart_left}>
                <div className={style.circle}><div className={'iconfont icon-gouwuche ' + style.car_icon} style={{ backgroundColor: active && '#00a0dc', color: active && '#ffffff' }}></div></div>
                <div className={style.totalPrice}><span style={{ color: active && '#ffffff' }}>￥{price}</span></div>
                <div className={style.postageFee}><span>另需配送费￥4元</span></div>
            </div>
            <div className={style.cart_right} style={{ backgroundColor: price >= 20 && '#00a0dc' }}>
                <div className={style.postageBase} style={{ color: price >= 20 && '#ffffff' }}><span>{price >= 20 ? '去结算' : `还差￥${20 - price}起送`}</span></div>
            </div>
        </div>
        {
            active && <div className={style.cart_container} onClick={(e) => closeCart(e)}>
                <div className={style.cart_content}>
                    <div className={style.cart_contentHeader}>
                        <span className={style.cartName}>购物车</span>
                        <span className={style.clearCart} onClick={clearCart}>清空</span>
                    </div>
                    <div className={style.cart_contentBody}>
                        <ul>
                            {
                                store.getState().cart.map((item, key) => {
                                    return <li key={key}>
                                        <span className={style.list_title}>{item.title}</span>
                                        <span className={style.list_price}><span>￥</span>{item.price * item.num}</span>
                                        <div className={style.list_count}>
                                            <span className={'iconfont icon-jianhao ' + style.list_sub} onClick={() => sub(item.title)}></span>
                                            <span className={style.list_num}>{item.num}</span>
                                            <span className={'iconfont icon-jiahao- ' + style.list_add} onClick={() => add(item.title)}></span>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
        }

    </div>

    )
}
